<template>
	<view class="content">
		<image src="/static/index/logo.svg" class="logo" mode=""></image>
		<view class="desc">轻量化、可交互的UI组件库</view>
		<view class="tab">
			<view class="tab-item" :class="{'tab-item-active':index==tabIndex}" v-for="(item,index) in tabs"
				:key='item.id' @click="tabIndex=index">
				{{item.name}}
				<image class="tab-item-active-icon" src="/static/index/active.svg" mode=""></image>
			</view>
		</view>
		<view class="cell-content" :class="{'cell-content-show':componentList.length>0}">
			<view v-for="(item,index) in componentList" :key='index' class="cell" @click="gourl(item.url)">
				{{item.name}}
				<image src="/static/index/arrow.svg" mode=""></image>
			</view>
		</view>
		<view class="cell-content" :class="{'cell-content-show':componentList.length==0}">
			敬请期待
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabs: [{
					id: 1,
					name: '基础组件',
					componentList: [{
							name: '电子签名',
							url: '/pages/sign/sign'
						}, {
							name: '3d-model',
							url: '/pages/3d-model/3d-model'
						}, {
							name: 'lottie',
							url: '/pages/lottie/lottie'
						}, {
							name: 'svga',
							url: '/pages/svga/svga'
						},
						{
							name: '海报',
							url: '/pages/canvas/canvas'
						},
						{
							name: '环形进度条',
							url: '/pages/progress-circle/progress-circle'
						}, {
							name: '锁屏',
							url: '/pages/lockScreen/lockScreen'
						},

					]
				}, {
					id: 2,
					name: 'AI组件',
					componentList: [{
						name: 'C-AI',
						url: '/uni_modules/c-ai/pages/chat/chat'
					},]
				},
				{
					id: 3,
					name: '营销组件',
					componentList: [{
						name: '刮刮卡',
						url: '/pagesMarketing/scratchCard/scratchCard'
					},]
				}]
			}
		},
		computed: {
			componentList() {
				return this.tabs[this.tabIndex].componentList
			}
		},
		methods: {
			gourl(url) {
				uni.navigateTo({
					url
				})
			}
		},
	}
</script>

<style lang="scss">
	.content {
		padding: 135rpx 42rpx 70rpx;

		.logo {
			width: 364rpx;
			height: 64rpx;
			position: relative;
			left: -16rpx;
		}

		.desc {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #777E90;
			line-height: 48rpx;
		}

		.tab {
			margin-top: 64rpx;
			margin-bottom: 42rpx;
			display: flex;

			.tab-item {
				position: relative;
				margin-right: 48rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #777E90;
				line-height: 64rpx;
				transition: all 0.25s;

				.tab-item-active-icon {
					transition: all 0.25s;
					opacity: 0;
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					bottom: 4rpx;
					right: -20rpx;
				}
			}

			.tab-item-active {
				transform: scale(1.2);
				// font-size: 48rpx;
				// font-family: PingFang SC-Semibold, PingFang SC;
				// font-weight: 600;
				color: #23262F;

				.tab-item-active-icon {
					opacity: 1;
				}
			}
		}

		.cell-content {
			transition: all 0.25s;
			opacity: 0;
			position: absolute;
			width: 88%;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #23262F;
		}

		.cell-content-show {
			opacity: 1;
		}

		.cell {
			width: 100%;
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 32rpx;
			background: #FCFCFD;
			border-radius: 24rpx;
			margin-bottom: 24rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #23262F;

			>image {
				width: 48rpx;
				height: 48rpx;
			}

			&:active {
				background-color: #eee;
			}
		}
	}
</style>